<template>
    <div id="employdetail" v-cloak>
        <Header :goback="goback" :title="header_title"></Header>
        <div class="topheader pd">
            <div class="border">
                <div class="disFlex">
                    <div class="disFlex">
                        <span class="font32">{{detail.department}}</span>
                        <span class="tip ts_tip" v-if="detail.matchSpendLabel == '非常匹配'">{{detail.matchSpendLabel}}</span>
                        <span class="tip ts_tip1" v-else-if="detail.matchSpendLabel != '非常匹配' && detail.matchSpendLabel != '不匹配'">{{detail.matchSpendLabel}}</span>
                        <span class="tip ts_tip2" v-else-if="detail.matchSpendLabel == '不匹配'">不匹配</span>
                    </div>
                    <div>
                        <span class="font28 fontGreenBlue">{{detail.postSalary}}</span>
                    </div>
                </div>
                <div class="flex label">
                    <div class="disFlex">
                        <img :src="require('@/assets/images/local.png')" alt="">
                        <span class="font28 fontBlack2">{{detail.address}}</span>
                    </div>
                    <div class="disFlex">
                        <img :src="require('@/assets/images/handbag.png')" alt="">
                        <span class="font28 fontBlack2">{{detail.workExperience}}</span>
                    </div>
                    <div class="disFlex">
                        <img :src="require('@/assets/images/degree-hat.png')" alt="">
                        <span class="font28 fontBlack2">{{detail.educationalRequireLabel}}</span>
                    </div>
                </div>
            </div>
            <div class="border pt32">
                <div class="flex label">
                    <div class="disFlex">
                        <img :src="require('@/assets/images/avatar.png')" alt="">
                        <span class="font28 fontBlack2">{{detail.contactPerson}}</span>
                    </div>
                    <div class="disFlex">
                        <img :src="require('@/assets/images/phone-telephone.png')" alt="">
                        <span class="font28 fontBlack2">{{detail.contactPhoneNumber}}</span>
                    </div>
                </div>
                <div class="flex label">
                    <div class="disFlex">
                        <img :src="require('@/assets/images/city.png')" alt="">
                        <span class="font28 fontBlack2">{{detail.companyName}}</span>
                    </div>
                </div>
            </div>
            <div class="pt32 border">
                <div class="textL font32 fontBlack2 pb">岗位详情</div>
                <div class="textL font28 fontBlack2">【岗位职责】</div>
                <div class="textL font28 fontBlack2" v-for="(item, i) in detail.description" :key="i">{{item}}<br><span v-if="i == detail.description.length - 1"><br></span></div>
                <div class="textL font28 fontBlack2">【岗位要求】</div>
                <div class="textL font28 fontBlack2" v-for="(item, i) in detail.jobRequire" :key="i">{{item}}<br><span v-if="i == detail.jobRequire.length - 1"><br></span></div>
                <div class="textL font28 fontBlack2">【岗位福利】</div>
                <div class="textL font28 fontBlack2" v-for="(item, i) in detail.postWelfare" :key="i">{{item}}<br><span v-if="i == detail.postWelfare.length - 1"><br></span></div>
            </div>
            <div class="pt32 border flex">
                <div class="font28 fontGrayB9 pr">工作性质</div>
                <div class="font28 fontBlack2 wid74 textL">{{detail.postTypeLabel}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font28 fontGrayB9 pr">所属部门</div>
                <div class="font28 fontBlack2 wid74 textL">{{detail.department}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font28 fontGrayB9 pr">招聘人数</div>
                <div class="font28 fontBlack2 wid74 textL">{{detail.recruitNum}}人</div>
            </div>
            <div class="pt32 border flex">
                <div class="font28 fontGrayB9 pr">休息制度</div>
                <div class="font28 fontBlack2 wid74 textL">{{detail.restLabel}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font28 fontGrayB9 pr">年龄范围</div>
                <div class="font28 fontBlack2 wid74 textL">{{detail.ageRequire}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font28 fontGrayB9 pr">语言要求</div>
                <div class="font28 fontBlack2 wid74 textL">{{detail.languageRequireLabel}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font28 fontGrayB9 pr">性别要求</div>
                <div class="font28 fontBlack2 wid74 textL">{{detail.genderRequireLabel}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font28 fontGrayB9 pr">行业要求</div>
                <div class="wid74 textL">
                    <span class="hy" v-for="(item, i) in detail.industry" :key="i">{{item}}</span>
                </div>
            </div>
            <div class="pt32 border flex">
                <div class="font28 fontGrayB9 pr">专业要求</div>
                <div class="font28 fontBlack2">{{detail.professionalRequire}}</div>
            </div>
        </div>
        <div class="bottom">
            <div @click="submit" class="font36 bgBlueFC fontWhite">我要应聘</div>
            <div @click="close" class="font36 fontBlack2">不感兴趣</div>
        </div>
        <van-overlay :show="show" z-index="20">
            <div class="wrapper" @click.stop>
                <div>
                    <div class="close">
                        <div class="font32 font600 textC">不感兴趣</div>
                        <div class="textC font32 color">未来30天内，我们将不再为您推送该岗位</div>
                    </div>
                    <div class="bgWhite disFlex btop">
                        <div @click="pop_close" class="right_b font32 fontBlack2">取消</div>
                        <div @click="pop_sub" class="font32 fontGreenBlue">确定</div>
                    </div>
                </div>
            </div>
        </van-overlay>
    </div>
</template>
<script>
import Header from '@/components/header.vue'
import { Toast } from 'vant';
import { getCurrentInstance,reactive } from 'vue'
export default {
    components: {
        Header
    },
    data() {
        return {
            header_title: '岗位详情',
            detail: {},
            show: false,
            api: '',
            id: this.$route.query.id,
            token: '',
            form: {
                companyId: '',
                postId: '',
                resumeId: '',
                identityNumber: ''
            },
            idcard: '', //身份证号
        }
    },
    created() {
        this.api = getCurrentInstance().appContext.config.globalProperties.$http;
        this.token = this.$store.state.token;
        this.idcard = this.$store.state.idCard;
        this.getqueryOne(); //获取简历信息
    },
    methods: {
        // 获取简历信息
        getqueryOne() {
            var that = this;
            that.api.get('/personnel/h5/resumeInfo/queryOne', {identityNumber: that.idcard}).then(res => {
                that.form.resumeId = res.data.resumeInfo.id;
                that.form.identityNumber = res.data.resumeInfo.identityNumber;
                that.getData(); //获取岗位详情
            })
        },
        // 岗位详情
        getData() {
            var that = this;
            that.api.get('/personnel/h5/postInfo/queryOne', {id:that.id, identityNumber: that.idcard}).then(res => {
                res.data.description = res.data.description.split('\n');
                res.data.jobRequire = res.data.jobRequire.split('\n');
                res.data.postWelfare = res.data.postWelfare.split('\n');
                res.data.industry = res.data.industry.split(',');
                that.form.postId = res.data.postId;
                that.form.companyId = res.data.companyId;
                that.detail = res.data;
            }).catch(err => {

            })
        },
        submit() {
            var that = this;
            that.api.post('/personnel/h5/postInfo/delivery', that.form).then(res => {
                if(res.data) {
                    Toast('感谢应聘');
                    that.show = false;
                    setTimeout(() => {
                        that.$router.replace('/home');
                    }, 2000);
                }
            })
        },
        close() {
            this.show = true;
        },
        pop_close() {
            this.show = false;
        },
        pop_sub() {
            let that = this;
            var data = {
                postId: that.form.postId,
                identityNumber: that.idcard
            };
            that.api.post('/personnel/h5/postInfo/notInterested', data).then(res => {
                if(data) {
                    Toast('期待下次合作');
                    setTimeout(function(){
                        that.$router.replace('/home');
                    }, 2000);
                }
            })
            
        },
        goback() {
            this.$router.replace('/home');
        }
    }
}
</script>
<style src="@/assets/css/employment.css"></style>
<style scoped>
#employdetail {
    width: 100%;
    height: 100%;
}
.pr {
    width: 25%;
}
.wid74 {
    width: 74%;
}
</style>